
<template>
  <div id="app">
    <!-- 查询表单 -->
    欢迎{{this.user.username}}登录
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="商品名称">
        <el-input v-model="formInline.name" placeholder="商品名称"></el-input>
      </el-form-item>

      <el-form-item label="商品状态">
        <el-select v-model="formInline.state" placeholder="商品状态" clearable>
          <el-option label="待审批" value="1"></el-option>
          <el-option label="已上架" value="2"></el-option>
          <el-option label="已下架" value="3"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="商品价格">
        <el-input v-model="formInline.age1" placeholder="价格1" style="width: 70px"></el-input>
        至
        <el-input v-model="formInline.age2" placeholder="价格2" style="width: 70px"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="findPage()">查询</el-button>
      </el-form-item>
    </el-form>

    <el-button type="primary" @click="toAdd()">录入商品</el-button>
    <el-button type="primary" @click="daochu()">导出</el-button>

    <!--表格用来展示数据-->
    <el-table
        :data="tableData"
        border
        style="width: 100%">
      <el-table-column
          prop="id"
          label="编号"
      >
      </el-table-column>

      <el-table-column
          prop="name"
          label="商品名称"
      >
      </el-table-column>

      <el-table-column
          prop="age"
          label="商品价格"
      >
      </el-table-column>

      <el-table-column
          prop="kc"
          label="商品库存"
      >
      </el-table-column>

      <el-table-column
          prop="stime"
          label="生产日期"
      >
      </el-table-column>

      <el-table-column
          prop="tx"
          label="商品特性"
      >
      </el-table-column>

      <el-table-column
          prop="state"
          label="商品状态"
      >
        <template slot-scope="scope">
          {{scope.row.state==1?"待审核":(scope.row.state==2?"已上架":"已下架")}}
        </template>
      </el-table-column>

      <el-table-column
          prop="pname"
          label="商品品牌"
      >
      </el-table-column>

      <el-table-column
          prop="img"
          label="商品图片"
      >
        <template v-slot="scope">
          <img :src="'http://localhost:8080/image/'+scope.row.img" width="50px" height="50px">
        </template>
      </el-table-column>

      <el-table-column
          prop="lcreate"
          label="录入人"
      >
      </el-table-column>

      <el-table-column
          prop="ltime"
          label="录入日期"
      >
      </el-table-column>

      <el-table-column
          label="操作">
        <template slot-scope="scope">
          <el-button type="info" @click="xq(scope.row.id)" size="mini">详情</el-button>
          <el-button type="primary" @click="toUpdate(scope.row.id)" size="mini">修改</el-button>
          <el-button type="danger" @click="del(scope.row.id)" size="mini">删除</el-button>
          <el-button type="success" v-if="scope.row.state==1" @click="zhuangtai(scope.row.id,2)" size="mini">上架</el-button>
          <el-button type="success" v-if="scope.row.state==2" @click="zhuangtai(scope.row.id,3)" size="mini">下架</el-button>
        </template>
      </el-table-column>



    </el-table>

    <!-- 分页展示数据-->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[3, 6, 9, 12]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>

    <!--添加弹窗-->
    <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">

      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

        <el-form-item label="商品名称" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>

        <el-form-item label="商品价格" prop="name">
          <el-input v-model="ruleForm.age"></el-input>
        </el-form-item>

        <el-form-item label="商品库存" prop="name">
          <el-input v-model="ruleForm.kc"></el-input>
        </el-form-item>

        <el-form-item label="生产日期" prop="stime">
          <el-date-picker
              v-model="ruleForm.stime"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="商品特性" prop="tx">
          <el-checkbox-group v-model="tx">
            <el-checkbox label="高速固态硬盘" name="tx"></el-checkbox>
            <el-checkbox label="内存可扩展" name="tx"></el-checkbox>
            <el-checkbox label="面部识别" name="tx"></el-checkbox>
            <el-checkbox label="长续航" name="tx"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="商品品牌" prop="pid">
          <el-select v-model="ruleForm.pid" placeholder="请选择商品品牌">
            <el-option  v-for="room in roomList" :label="room.name" :value="room.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="商品图片">
          <el-upload
              class="avatar-uploader"
              action="http://localhost:8080/goods/upload"
              name="file"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="add('ruleForm')" v-text="ruleForm.id==null?'添加':'修改'"></el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<script>
// @ is an alias to /src
import axios from "axios"

export default {
  data(){
    return{
      /*
        data:就是用来定义数据的要用什么就自己定义什么
        []:数组，集合
        {}:对象(里面有属性)
         */
      tableData:[],
      pageNum:1,
      pageSize:3,
      total:0,
      formInline:{},
      user:{},
      roomList:[],
      dialogVisible:false,
      tx:[],
      ruleForm:{},
      imageUrl:"",
    }
  },
  methods:{
    /*！！！！！！！！！！！
    methods:这个里面定义的全部都是方法
    现在是spring boot+vue 框架
    不一样的就是在 从vue框架里面的methods里面
    通过方法去请求路径(请求的路径就是后台的路径)
    拿到数据放到下面的created()里面来加载数据才能在页面展示

    ***html使用ajxa 请求controller  controller把数据返回给前端 不再去跳转页面了***

     */
    findPage(){ //查询所有加分页参数
      this.axios.post(`http://localhost:8080/goods/findPage?pageNum=${this.pageNum}&pageSize=${this.pageSize}`,this.formInline).then(res=>{
        console.log(res.data);
        this.tableData=res.data.data.records;
        this.total=res.data.data.total;
      })
    },
    handleCurrentChange(val) {//分页方法
      this.pageNum=val;
      this.findPage();
    },
    toAdd(){ //往添加对话框里清空数据
      this.dialogVisible=true;
      this.ruleForm={};
      this.tx=[];
      this.imageUrl="";
    },
    add(formName) { //添加方法
      this.$refs[formName].validate((valid) => {
        if (valid) {//满足校验
          //通过ajax把数据保存到后端
          this.ruleForm.tx=this.tx.toString();
          axios.post(`http://localhost:8080/goods/add`,this.ruleForm).then(res=>{
            if (res.data.code==1){
              this.$message.success("添加成功");
            }else{
              this.$message.error("添加失败");
            }
            this.dialogVisible=false;
            this.findPage();
          })
        } else {//不满足校验
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) { //重置按钮点击可以重置
      this.$refs[formName].resetFields();
    },
    handleAvatarSuccess(res, file) { //上传图片方法 回显保存图片
      this.imageUrl = URL.createObjectURL(file.raw);
      this.ruleForm.img=res.data;
    },
    beforeAvatarUpload(file) { //判断图片大小方法
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    xialaList(){ //动态获取下拉框方法
      axios.get(`http://localhost:8080/goods/xialaList`).then(res=>{
        this.roomList=res.data.data;
      })
    },
    xq(id){ //跳转到详情页面方法
      location.href=`#/xq?id=${id}`;
    },
    toUpdate(id){ //修改回显数据方法
      axios.get(`http://localhost:8080/goods/findById?id=${id}`).then(res=>{
        this.ruleForm=res.data.data;
        this.imageUrl='http://localhost:8080/image/'+res.data.data.img;
        this.tx=res.data.data.tx.split(",")
        this.dialogVisible=true;
      })
    },
    del(id){ //删除方法
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.get(`http://localhost:8080/goods/deleteById?id=${id}`).then(res=>{
          if (res.data.code==1){
            this.$message.success("删除成功")
          }else{
            this.$message.error("删除成功")
          }
          this.findPage();
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    zhuangtai(id,state){ //状态修改方法
      axios.get(`http://localhost:8080/goods/zhuangtai?id=${id}&state=${state}`).then(res=>{
        if(res.data.code==1){
          this.$message.success("审批成功！");
          this.findPage();
        }else{
          this.$message.error("审批成功！");
        }
      })
    },
    daochu(){ //导出方法
      location.href='http://localhost:8080/goods/daochu?';
    },
  },
  created(){
    /*
    ！！！！！！！！！！注意created()：
    这个里面才是可以把数据展示到页面的方法
    思考那个方法是要把数据放到前台 就在这个里面写那个方法
     */
    var userDB=sessionStorage.getItem("userDB"); //从login.html页面的session域中拿到的数据
    if (userDB==null){
      location.href="#/login";
    }
    this.user=JSON.parse(userDB);//动态获取显示登录人的数据 因为从session域中拿出来所以要转换数据类型
    this.findPage();//展示所有的数据
    this.xialaList();//动态获取下拉框的数据
  }
}
</script>